<template>
  <div class="dashboard-info">
    <a-row style="width: 100%">
      <a-col :span="24" :xs="24" :lg="24" :xl="24" :xxl="12">
        <dashboard-card title="节点信息" :loading="infoLoad" @render="getInfoData()">
          <a-descriptions
            v-if="info !== null"
            :column="1"
            style="width: 100%"
            :align="{ value: 'right' }"
          >
            <a-descriptions-item label="name">{{ info.name }}</a-descriptions-item>
            <a-descriptions-item label="cluster_name">{{ info.cluster_name }}</a-descriptions-item>
            <a-descriptions-item label="cluster_uuid">{{ info.cluster_uuid }}</a-descriptions-item>
            <a-descriptions-item label="tagline">{{ info.tagline }}</a-descriptions-item>
            <a-descriptions-item label="version.number">{{
              info.version.number
            }}</a-descriptions-item>
            <a-descriptions-item label="version.build_flavor"
              >{{ info.version.build_flavor }}
            </a-descriptions-item>
            <a-descriptions-item label="version.build_type"
              >{{ info.version.build_type }}
            </a-descriptions-item>
            <a-descriptions-item label="version.build_hash"
              >{{ info.version.build_hash }}
            </a-descriptions-item>
            <a-descriptions-item label="version.build_date"
              >{{ info.version.build_date }}
            </a-descriptions-item>
            <a-descriptions-item label="version.build_snapshot"
              >{{ info.version.build_snapshot }}
            </a-descriptions-item>
            <a-descriptions-item label="version.lucene_version"
              >{{ info.version.lucene_version }}
            </a-descriptions-item>
            <a-descriptions-item label="version.minimum_wire_compatibility_version">
              {{ info.version.minimum_wire_compatibility_version }}
            </a-descriptions-item>
            <a-descriptions-item label="version.minimum_index_compatibility_version">
              {{ info.version.minimum_index_compatibility_version }}
            </a-descriptions-item>
          </a-descriptions>
          <a-space v-else direction="vertical" size="large" :style="{ width: '100%' }">
            <a-skeleton animation>
              <a-space direction="vertical" :style="{ width: '100%' }" size="large">
                <a-skeleton-line :rows="13" />
              </a-space>
            </a-skeleton>
          </a-space>
        </dashboard-card>
      </a-col>

      <a-col :span="24" :xs="24" :lg="24" :xl="24" :xxl="12">
        <dashboard-card title="集群健康" :loading="clusterHealthLoad" @render="getClusterHealth()">
          <a-descriptions
            v-if="clusterHealth !== null"
            :column="1"
            style="width: 100%"
            :align="{ value: 'right' }"
          >
            <a-descriptions-item label="cluster_name">{{
              clusterHealth.cluster_name
            }}</a-descriptions-item>
            <a-descriptions-item label="status">{{ clusterHealth.status }}</a-descriptions-item>
            <a-descriptions-item label="timed_out">{{
              clusterHealth.timed_out
            }}</a-descriptions-item>
            <a-descriptions-item label="number_of_nodes"
              >{{ clusterHealth.number_of_nodes }}
            </a-descriptions-item>
            <a-descriptions-item label="number_of_data_nodes"
              >{{ clusterHealth.number_of_data_nodes }}
            </a-descriptions-item>
            <a-descriptions-item label="active_primary_shards"
              >{{ clusterHealth.active_primary_shards }}
            </a-descriptions-item>
            <a-descriptions-item label="active_shards"
              >{{ clusterHealth.active_shards }}
            </a-descriptions-item>
            <a-descriptions-item label="relocating_shards"
              >{{ clusterHealth.relocating_shards }}
            </a-descriptions-item>
            <a-descriptions-item label="initializing_shards"
              >{{ clusterHealth.initializing_shards }}
            </a-descriptions-item>
            <a-descriptions-item label="unassigned_shards"
              >{{ clusterHealth.unassigned_shards }}
            </a-descriptions-item>
            <a-descriptions-item label="delayed_unassigned_shards">
              {{ clusterHealth.delayed_unassigned_shards }}
            </a-descriptions-item>
            <a-descriptions-item label="number_of_pending_tasks"
              >{{ clusterHealth.number_of_pending_tasks }}
            </a-descriptions-item>
            <a-descriptions-item label="number_of_in_flight_fetch">
              {{ clusterHealth.number_of_in_flight_fetch }}
            </a-descriptions-item>
            <a-descriptions-item label="task_max_waiting_in_queue_millis">
              {{ clusterHealth.task_max_waiting_in_queue_millis }}
            </a-descriptions-item>
            <a-descriptions-item label="active_shards_percent_as_number">
              {{ clusterHealth.active_shards_percent_as_number }}
            </a-descriptions-item>
          </a-descriptions>
          <a-space v-else direction="vertical" size="large" :style="{ width: '100%' }">
            <a-skeleton animation>
              <a-space direction="vertical" :style="{ width: '100%' }" size="large">
                <a-skeleton-line :rows="15" />
              </a-space>
            </a-skeleton>
          </a-space>
        </dashboard-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import MessageUtil from "@/utils/model/MessageUtil";
import { useUrlStore } from "@/store";
import { ClusterHealth } from "@/components/es/domain/ClusterHealth";
import DashboardCard from "@/page/dashboard/components/DashboardCard.vue";
import { Overview } from "@/components/es/domain/Overview";
import { clientInstanceClusterHealthApi, clientInstanceInfoApi } from "@/api";

const empty = computed(() => useUrlStore().empty);

const info = ref<Overview | null>(null);
const infoLoad = ref(false);
const clusterHealth = ref<ClusterHealth | null>(null);
const clusterHealthLoad = ref(false);

function getInfoData() {
  if (empty.value) {
    return;
  }
  infoLoad.value = true;
  const { id } = useUrlStore();
  if (!id) return MessageUtil.error("请先选择连接");
  clientInstanceInfoApi(id)
    .then((rsp) => (info.value = rsp))
    .catch((e) => MessageUtil.error("节点信息获取失败", e))
    .finally(() => (infoLoad.value = false));
}

getInfoData();

function getClusterHealth() {
  if (empty.value) {
    return;
  }
  clusterHealthLoad.value = true;
  const { id } = useUrlStore();
  if (!id) return MessageUtil.error("请先选择连接");
  clientInstanceClusterHealthApi(id)
    .then((rsp) => (clusterHealth.value = rsp))
    .catch((e) => MessageUtil.error("集群健康值获取失败", e))
    .finally(() => (clusterHealthLoad.value = false));
}

getClusterHealth();

watch(
  () => useUrlStore().current,
  () => {
    getInfoData();
    getClusterHealth();
  }
);
</script>
<style scoped>
.dashboard-info {
}
</style>
